<template>
    <div class="user">
        <van-nav-bar title="立即提现" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="user-order">
            <div style="font-family: MiSans, MiSans;
font-weight: 400;
font-size: 14px;
color: #A2A2A2;padding: 14px;">提现金额</div>
            <div style="display: flex;">
                <div style="padding-left: 14px;padding-top: 14px;font-family: MiSans, MiSans;
font-weight: 400;
font-size: 28px;
color: #515151;">￥</div>
                <van-field v-model="message" label="" :placeholder="placeholder"
                    style="font-size: 26px;padding-top: 12px;" />
                <div style="width: 116px;
height: 20px;
font-family: MiSans, MiSans;
font-weight: 400;
font-size: 13px;
color: #389138;padding-top: 20px;" @click="allTixian">全部提现</div>
            </div>

            <div style="padding-top: 20px;padding-left: 12px;color: #A2A2A2;font-size: 13px;">
                提现金额需要≥10元，提现需要收取{{withdraw}}%的服务费
            </div>
        </div>

        <div style="font-family: MiSans, MiSans;
font-weight: 400;
font-size: 13px;
color: #A2A2A2;padding: 15px;">
            注：审核通过后即可提现到微信，请注意查收
        </div>
        <div style="margin-top: 137px;">
            <van-button type="primary"
                style="width: 320px;height: 44px;border-radius: 50px;margin-left: 42px;background-color: #389138;font-size: 16px;"
                @click="togoTixian">立即提现</van-button>
        </div>



        <van-popup v-model="showDialog" :style="{ height: '190px', width: '300px', borderRadius: '15px' }">
            <div class="dialog-content" style="text-align: center;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #999999;margin-top: 36px;">
                    确认是否提现？
                </div>
                <div style="text-align: center;display: flex;margin-top: 30px;">
                    <div style="width: 120px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="queding">
                        <div>确定</div>
                    </div>
                    <div style="width: 120px;height: 44px;background: #CCCCCC;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="cancek">
                        <div>取消</div>
                    </div>
                </div>
            </div>
        </van-popup>

    </div>
</template>

<script>

import { withdraw,config } from '@/api/user'

import { mapGetters } from 'vuex'
export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            form: {
                username: '',
                password: '',
                mobile: ""
            },
            message: "",
            showDialog: false,
            placeholder: "",
            withdraw:0
        };
    },
    mounted() {
        this.placeholder = "可提现" + this.userInfo.money + "元"
        this.getConfig()
    },
    methods: {
        getConfig(){
            config().then((res=>{
                this.withdraw = res.data.withdraw
            }))
        },
        togoTixian() {
            this.showDialog = true
        },
        allTixian(){
            this.message =  this.userInfo.money
        },
        onClickLeft() {
            this.$router.back()
        },
        cancek() {
            this.showDialog = false
        },
        queding() {
            let obj = {
                money: this.message
            }
            withdraw(obj).then((res) => {
                this.$router.back()

            })
        }
    },

    computed: {
        ...mapGetters(['userInfo'])
    }
}
</script>

<style scoped>
.user-order {
    width: 702px;
    height: 260px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px !important;
    margin-top: 42px;
    background-color: #fff;
}
</style>